<template>
  <div class="nftpage">
    <!-- <div class="page-title">
			<img src="../assets/img/ico.png" alt="" srcset="">
			<p>NFT数据</p>
		</div> -->
    <el-tabs v-model="activeName">
      <el-tab-pane label="NFT数据" name="first">
        <div class="list-box">
          <el-table
            :data="list"
            v-loading="loading"
            stripe
            style="width: 100%"
            header-row-class-name="headcss"
            @sort-change="sortChange"
          >
            <el-table-column prop="Id" label="Image" align="center">
              <template slot-scope="scope">
                <img
                  :src="scope.row.Path"
                  alt=""
                  srcset=""
                  style="width: 40px; margin: 0; display: inline-block"
                />
              </template>
            </el-table-column>
            <el-table-column prop="Level" label="等级" align="center">
              <template slot="header" slot-scope="scope">
                <el-dropdown trigger="click" @command="handleLevelChange">
                  <span class="el-dropdown-link">
                    等级<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="(value, index) in levels"
                      :key="index"
                      :command="value"
                      >{{ value }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
            <el-table-column prop="Price" label="价值" align="center">
              <template slot-scope="scope">
                {{ scope.row.Price }} USD
              </template>
            </el-table-column>
            <el-table-column
              prop="TotalSupply"
              label="总量"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="Orders"
              label="用户挂卖量"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="SaleLeft"
              label="可出售量"
              align="center"
              sortable="custom"
            ></el-table-column>

            <el-table-column
              prop="SellNumber"
              label="已出售量"
              align="center"
            ></el-table-column>

            <el-table-column
              prop="SynLeft"
              label="可合成量"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="TotalSynthetic"
              label="已合成量"
              align="center"
            ></el-table-column>

            <el-table-column prop="is_score" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="handleOpen(scope.row)"
                  >新增折扣商品</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <p class="tabbtn">
            <button class="btn1" @click="open()">总量统计</button>
          </p>
        </div>
        <div class="page-limit">
          <el-pagination
            @size-change="SizeChange"
            @current-change="CurrentChange"
            :current-page="currentPage"
            :page-size="size"
            layout="total, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="折扣商品" name="second">
        <el-row :gutter="20" type="flex" align="middle" justify="space-between">
          <el-col :span="6">
            <el-select
              v-model="searchTypes"
              placeholder="预售品类型"
              style="width: 100%"
              @change="handleChange()"
            >
              <el-option label="鞋子" value="1"></el-option>
              <el-option label="其他" value="0"></el-option> </el-select
          ></el-col>
        </el-row>
        <div class="list-box">
          <el-table
            :data="salesList"
            v-loading="loading"
            stripe
            style="width: 100%"
            header-row-class-name="headcss"
          >
            <el-table-column prop="Id" label="Image" align="center">
              <template slot-scope="scope">
                <img
                  :src="scope.row.Path"
                  alt=""
                  srcset=""
                  style="width: 40px; margin: 0; display: inline-block"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="Id"
              label="预售品id"
              align="center"
            ></el-table-column>
            <el-table-column prop="Types" label="预售商品类型" align="center">
              <template slot-scope="scope">
                {{ scope.row.Type == 1 ? "鞋子" : "其他" }}
              </template></el-table-column
            >

            <el-table-column
              prop="ProductId"
              label="产品编号"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="PlanNumber"
              label="剩余量"
              align="center"
            ></el-table-column>

            <el-table-column
              prop="SaleNumber"
              label="销售量"
              align="center"
            ></el-table-column>
            <el-table-column prop="Rate" label="折率" align="center">
              <template slot-scope="scope"> {{ scope.row.Rate }} 折 </template>
            </el-table-column>
            <el-table-column prop="Price" label="折后价" align="center">
            </el-table-column>
            <el-table-column
              prop="StartTime"
              label="预售开始时间"
              align="center"
            ></el-table-column>
            <el-table-column prop="Flag" label="状态" align="center">
              <template slot="header" slot-scope="scope">
                <el-dropdown trigger="click" @command="handleSalesStateChange">
                  <span class="el-dropdown-link">
                    状态<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="(value, index) in salesStates"
                      :key="index"
                      :command="value"
                      >{{ value.value }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
              <template slot-scope="scope">
                {{
                  scope.row.Flag == 0
                    ? "未开始"
                    : scope.row.Flag == 1
                    ? "出售中"
                    : "售完"
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="Time"
              label="设定时间"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
        <div class="page-limit">
          <el-pagination
            @size-change="SizeSalesChange"
            @current-change="CurrentSalesChange"
            :current-page="currentSalesPage"
            :page-size="salesSize"
            layout="total, prev, pager, next, jumper"
            :total="salesTotal"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>

    <NFTSComponent ref="nfts" />

    <el-dialog title="新增商品" :visible.sync="openSaleModal" width="30%">
      <el-form :model="form">
        <el-form-item label="预售品类型">
          <el-select
            v-model="form.Types"
            placeholder="预售品类型"
            style="width: 100%"
          >
            <el-option label="鞋子" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预售品id">
          <el-input v-model="form.ID"></el-input>
        </el-form-item>
        <el-form-item label="预售数量">
          <el-input v-model="form.Number"></el-input>
        </el-form-item>
        <el-form-item label="折率">
          <el-input v-model="form.Rate"></el-input>
        </el-form-item>
        <el-form-item label="预售开始时间">
          <el-date-picker
            v-model="form.Start"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openSaleModal = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getnftData, salesProductList, addsalesProduct } from "@/utils/api";
import NFTSComponent from "@/components/nftsComponent.vue";
import moment from "moment";
export default {
  components: { NFTSComponent },
  data() {
    return {
      currentPage: 1,
      size: 10,
      total: 0,
      list: [],
      loading: false,
      activeName: "first",
      openSaleModal: false,
      Level: "",
      form: {
        Types: "1",
        ID: "",
        Number: "",
        Rate: "",
        Start: "",
      },
      levels: ["all", "1", "2", "3", "4", "5", "6"],
      salesStates: [
        { key: -1, value: "全部" },
        { key: 0, value: "未开放" },
        { key: 1, value: "出售中" },
        { key: 2, value: "售完" },
      ],
      //折扣商品数据
      salesList: [],
      salesSize: 10,
      currentSalesPage: 1,
      salesTotal: 0,
      Rules: 0,
      SaleState: -1,
    };
  },
  mounted() {
    this._getnftData();
    this._salesProductList();
  },
  methods: {
    async _getnftData() {
      this.loading = true;
      let params = {
        size: this.size,
        page: this.currentPage - 1,
        Rules: this.Rules,
      };
      if (this.Level) {
        params.Level = Number(this.Level);
      }
      let { data, response } = await getnftData(params);
      let { Date, Total } = data;
      this.loading = false;
      this.total = Total;
      this.list = Date;
    },
    SizeChange(size) {
      this.size = size;
      this.currentPage = 1;
      this._getnftData();
    },
    CurrentChange(page) {
      this.currentPage = page;
      this._getnftData();
    },
    open() {
      this.$refs.nfts.open();
    },
    handleOpen(row) {
      this.form = { ...this.form, ID: String(row.Id) };
      this.openSaleModal = true;
    },
    sortChange(data) {
      if (data.order === "descending") {
        this.Rules = 1;
      } else {
        this.Rules = 0;
      }
      setTimeout(() => this._getnftData(), 100);
    },
    handleLevelChange(value) {
      this.Level = value;
      this._getnftData();
    },
    async handleAdd() {
      const form = this.form;
      const params = {};

      if (!form.ID) {
        this.$message.warning("预售品id不能为空");
        return;
      } else if (!form.Number) {
        this.$message.warning("预售数量不能为空");
        return;
      } else if (!form.Rate) {
        this.$message.warning("折率不能为空");
        return;
      } else if (form.Rate < 0.01 || form.Rate > 0.99) {
        this.$message.warning("折率不能小于 0.01, 且不能大于0.99");
        return;
      }

      for (let k in form) {
        params[k] = Number(form[k]);
      }

      const d = form.Start;
      if (!d) {
        params.Start = "-";
      } else {
        params.Start = moment(d).format("YYYY-MM-DD HH:mm:ss");
      }
      const res = await addsalesProduct(params);
      if (res.response.msg !== "Ok") {
        this.$message.error(res.data);
      } else {
        this.openSaleModal = false;
        this.$message.success("添加成功");
        this._salesProductList();
        this.form = {
          Types: "1",
          ID: "",
          Number: "",
          Rate: "",
          Start: "",
        };
      }
    },
    // 折扣商品
    async _salesProductList(searchTypes) {
      this.loading = true;
      let { data, response } = await salesProductList({
        size: this.size,
        page: this.currentPage - 1,
        Types: searchTypes ? searchTypes : 1,
        Id: 0,
        State: Number(this.SaleState),
      });
      let { Date, Total } = data;
      const list = data.map((item) => ({
        ...item.Preinfo,
        Path: item.Nftinfo.Path,
      }));
      this.loading = false;
      this.salesTotal = Total;
      this.salesList = list;
    },
    handleSalesStateChange(value) {
      this.SaleState = value.key;
      this._salesProductList();
    },
    SizeSalesChange(size) {
      this.salesSize = size;
      this.currentSalesPage = 1;
      this._salesProductList();
    },
    CurrentSalesChange(page) {
      this.currentSalesPage = page;
      this._salesProductList();
    },
    handleChange() {
      this._salesProductList(Number(this.searchTypes));
    },
  },
};
</script>

<style scoped lang="scss">
.nftpage {
  padding: 20px 0 20px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.page-limit {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
.list-box {
  flex: 1;
  padding-right: 20px;
}
.tabbtn {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
}
.btn1 {
  width: 70px;
  height: 40px;
  background: rgba(211, 12, 63, 0.99);
  border-radius: 5px;
  color: #fff;
  &:active {
    opacity: 0.8;
  }
}
.page-title {
  display: flex;
  align-items: center;
  padding-bottom: 20px;

  p {
    margin-left: 10px;
    font-size: 24px;
    color: #333333;
  }

  img {
    width: 24px;
  }
}
</style>
<style>
.el-table {
  border-radius: 5px;
}
.el-table th.el-table__cell {
  background-color: #2389fd !important;
  color: #fff;
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #deeeff !important;
}
.el-table td.el-table__cell {
  border: none;
}
.el-dropdown-link {
  color: #fff;
}
</style>
